<template>
	<view>
		<view class="df aic jcsa tab-container">
			<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id-1)"
				@click="swichMenu(item.id-1)">
				<view :class="currentTab === (item.id - 1) ? 'menu-topic-act':''">
					<text :style="{'color':currentTab === (item.id - 1) ? '#3d7eff':'#303133'}"
						class="menu-topic-text">{{item.name}}</text>

				</view>
			</view>

			<view class="active-bottom">

			</view>

		</view>
		<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange" :duration="500">
			<swiper-item class="swiper-topic-list" v-for="item in swiperDataList" :key="item.id">
				<view class="swiper-item">
					<!-- <slot></slot> -->
					{{item.content}}
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		onBeforeUpdate
	} from 'vue';

	// const props = defineProps({
	// 	tabs:Array,
	// 	swiperDataList:Array
	// })

	const tabs = ref([{
			id: 1,
			name: '从未安装'
		},
		{
			id: 2,
			name: '已安装'
		},
		{
			id: 3,
			name: '全部'
		}
	])
	const currentTab = ref(0)
	const tabCurrent = ref('tabNum1')
	const swiperDataList = ref([{
			id: 1,
			content: '从未安装'
		},
		{
			id: 2,
			content: '已安装'
		},
		{
			id: 3,
			content: '全部'
		}
	])
	const swichMenu = async (id) => {
		currentTab.value = id
		tabCurrent.value = 'tabNum' + id
	}



	const swiperChange = (e) => {
		let index = e.detail.current
		swichMenu(index)
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.body-view {
		height: 100vh;
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		align-items: flex-start;
		justify-content: center;
	}

	.top-menu-view {
		display: flex;
		position: fixed;
		top: 100rpx;
		left: 0;
		white-space: nowrap;
		width: 100%;
		background-color: #FFFFFF;
		height: 86rpx;
		line-height: 86rpx;
		border-top: 1rpx solid #d8dbe6;




	}

	.swiper-box-list {
		width: 100%;
		padding-top: 200rpx;
		flex: 1;
		background-color: #FFFFFF;

	}

	.swiper-topic-list {
		width: 100%;
	}

	.menu-topic-bottom-color {
		width: 60%;
		height: 4rpx;
	}

	.menu-topic-act .menu-topic-bottom {
		display: flex;
		justify-content: center;
	}

	.menu-topic-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		transition: all 0.5s ease;

	}


	.menu-topic-text {
		font-size: 30rpx;
		color: #303133;
		padding: 10rpx 40rpx;
	}

	.menu-topic-act .menu-topic-bottom-color {
		background: #3d7eff;
		color: #3d7eff;
	}

	.menu-topic-view {
		display: inline-block;
		white-space: nowrap;
		// height: 86rpx;
		padding: 20rpx 0;
		position: relative;



		// .menu-topic-act {
		// 	margin-left: 30upx;
		// 	margin-right: 10upx;
		// 	position: relative;
		// 	height: 100%;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// }
	}

	.tab-container {
		border-bottom: 2rpx solid #ccc;
		position: relative;
	}

	.active-bottom {
		position: absolute;
		bottom: 0;
		width: 40rpx;
		height: 4rpx;
		background-color: #3d7eff;
	}
</style>